<template>
	<div class="bankgl-box">
		<ul class="bankgl-list">
			<li class="bankgl-item" v-for="(item,index) in bankcardlist" @click="xuanzebank(item.bank_id)">
				<span><img src="../../img-user/bank_icon@3x.png" alt="" /></span>
				<h3 v-text="item.bank_name">中国农业银行</h3>
				<p v-text="'**** **** **** '+item.bank_num"></p>
				<span @click.stop="deletebank(item.bank_id,index)">删除</span>
			</li>
		</ul>
		<router-link to="/newbank" class="tianjiabank">
			<span><img src="../../img-user/icon_jia@3x.png"/></span>
			<span>添加银行卡</span>
		</router-link>
		<deletctrol :msg="deletemsg" @btnstatus="deletebtn" v-show="deleteshow"></deletctrol>
	</div>
</template>

<script>
	import deletctrol from "@/components/widget/deletectrol"
	export default{
		data () {
			return{
				user:0,
				bankcardlist:'',
				deleteshow:false,
				deletemsg:"你确定删除这张银行卡吗？",
				czbankid:0,
				shoplistind:''
			}
		},
		components:{deletctrol},
		created:function(){
			this.user=localStorage.getItem("nt_user");
		},
		methods:{
			xuanzebank:function(id){
				var self=this;
				$.ajax({
					type:"post",
					url:furl+"index.php?app=ajax_epay&act=check_bank",
					data:{'token':self.user,'bank_id':id,'bank_type':1},
					dataType:'json',
					success:function(res){
						if(res.done){
							history.go(-1);
						}
					}
				});
			},
			deletebank:function(id,num){
				this.czbankid=id;
				this.shoplistind=num;
				this.deleteshow=true;
			},
			deletebtn:function(data){
				if(data){
					var self=this;
					$.ajax({
						type:"post",
						url:furl+"index.php?app=ajax_epay&act=bank_list",
						data:{'token':self.user,'bank_id':self.czbankid},
						dataType:'json',
						success:function(res){
							if(res.done){
								self.bankcardlist.splice(self.shoplistind,1);
								self.deleteshow=false;
							}
						}
					});
				}else{
					this.deleteshow=false;
				}
			}
		},
		mounted:function(){
			var self=this;
			$.ajax({
				type:'get',
				url:furl+'index.php?app=ajax_epay&act=bank_list',
				data:{'token':self.user,'bank_type':1},
				dataType:'json',
				success:function(res){
					if(res.done){
						self.bankcardlist=res.retval;
					}
				}
			})
		}
	}
</script>

<style>
	.bankgl-box{font-size:0;}
	.bankgl-list{padding-top: 0.32rem;padding-left: 0.32rem;padding-right: 0.32rem;}
	.bankgl-item{height:2.04rem;background-image:url(../../img-user/bank_bg@3x.png);background-size:100% 100%;padding-top: 0.4rem;padding-left: 0.38rem;margin-bottom: 0.32rem;position:relative;}
	.bankgl-item>span:first-child{float:left;}
	.bankgl-item>span:first-child>img{width:0.85rem;height:0.85rem;}
	.bankgl-item>h3{font-size:0.4rem;color:#fff;line-height: 0.66rem;font-weight:500;margin-left: 1.44rem;}
	.bankgl-item>p{font-size:0.26rem;color:#fff;line-height: 0.4rem;margin-left: 1.44rem;}
	.bankgl-item>span:last-child{position:absolute;bottom:0.1rem;right:0.32rem;display: inline-block;width:1.1rem;height:0.56rem;line-height: 0.56rem;font-size:0.28rem;color:#fff;text-align: center;}
	.tianjiabank{display: block;text-align: center;line-height: 0.4rem;}
	.tianjiabank>span:first-child{display: inline-block;width:0.32rem;height:0.32rem;margin-right: 0.12rem;}
	.tianjiabank>span:first-child>img{width:0.26rem;height:0.26rem;vertical-align:top;margin-top: -0.06rem;}
	.tianjiabank>span:last-child{display:inline-block;font-size:0.32rem;color:#4C9D31;}
</style>